<template>
    <div class="father">
        <h1>shallowRef与shallowReactive</h1>
        <h2>求和为:{{ sum }}</h2>
        <h2>名字为:{{ person.name }}</h2>
        <h2>年龄为:{{ person.age }}</h2>
        <button @click="changeSum">sum+1</button>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changePerson">修改整个人</button>
        <br>
        <h2>车：{{ car }}</h2>
        <button @click="changeBrand">修改品牌</button>
        <button @click="changeColor">修改颜色</button>
        <button @click="changeEngine">修改发动机</button>
        <!-- <button @click="changeCar">修改整个车</button> -->


    </div>
</template>

<script setup lang="ts" name="Father">
import { ref, reactive, shallowRef,shallowReactive } from 'vue'

let sum = shallowRef(1)
let person = shallowRef({
    name: "张三",
    age: 18
})
let car = shallowReactive({
    barnd: "奔驰",
    options: {
        color: "红色",
        engine: "v8"
    }

})


function changeSum() {
    sum.value += 1
}
function changeName() {
    person.value.name = "李四"
}
function changeAge() {
    person.value.age += 1
}
function changePerson() {
    person.value = { name: "王武", age: 14 }
}


function changeBrand() {
    car.barnd = "宝马"
}
function changeColor() {
    car.options.color = "紫色"
}
function changeEngine() {
    car.options.engine = "v12"
}

</script>

<style  scoped>
button {
    margin: 0 10px
}

.father {
    background-color: reb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
}
</style>